<!--
Copyright (c) 2016 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->

<dom-module id="step-style">
  <template>
    <style>
      :host {
        --google-codelab-step-note: {};
        --google-codelab-step-tip: {};
        --google-codelab-step-warn: {};
        --google-codelab-step-callout: {};
        --google-codelab-step-code: {};
      }

      :host {
        line-height: 24px;
        display: block;
      }

      #title {
        font-family: 'Google Sans', Arial, sans-serif;
        font-size: 28px;
        font-weight: 400;
        line-height: 1em;
        margin: 0 0 30px;
      }


      :host-context(google-codelab:not([theme="minimal"])) .instructions {
        box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
        background: var(--google-codelab-step-background, #fff);
        max-width: 800px;
        font-size: 14px;
        margin: 0 auto;
        margin-bottom: 32px;
        border-radius: 4px;
      }

      .instructions .inner {
        padding: 24px;
      }

      :host-context(google-codelab[theme="minimal"]) .instructions .inner {
        padding: 0 24px;
      }

      @media (max-width: 800px) {
        .instructions {
          margin: 0 0 16px 0;
        }
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a,
      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a:visited {
        color: var(--google-codelab-step-link-color, --google-material-blue-600);
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2,
      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3,
      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h4 {
        font-weight: 400;
        margin: 0;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
        font-weight: 300;
        line-height: 1em;
        font-size: 22px;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content {
        line-height: 24px;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content li {
        margin: 0.5em 0;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
        font-weight: 500;
        margin: 1.5em 0 0 0;
        font-size: 20px;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3 {
        font-weight: 500;
        margin: 20px 0 0 0;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside {
        padding: 0.5em 1em;
        margin: 2em 0;
        border-left: 4px solid;
        border-radius: 4px;
      }

      :host-context(google-codelab:not([theme="minimal"]))  :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside p {
        margin: 0.5em 0;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.note,
      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.notice {
        border-color: #EA8600;
        background: #FEF7E0;
        color: var(--google-material-grey-900);
        @apply(--google-codelab-step-note);
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.tip,
      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.special {
        border-color: #137333;
        background: #E6F4EA;
        color: var(--google-material-grey-900);
        @apply(--google-codelab-step-tip);
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.warning {
        border-color: #EA8600;
        background: #FEF7E0;
        color: var(--google-material-grey-900);
        @apply(--google-codelab-step-warn);
      }

      .instructions ::content aside.callout {
        background-color: #E8F0FE;
        margin: 20px 0;
        padding: 15px;
        border-left: 3px solid var(--google-material-blue-800);
        border-radius: 4px;
        color: var(--google-material-grey-900);
        font-size: 14px;
        line-height: 1.5;
        @apply(--google-codelab-step-callout);
      }

      .instructions ::content aside.callout b {
        color: var(--google-material-blue-800);
      }

      .instructions ::content ul.checklist {
        list-style: none;
        padding: 0 0 0 1em;
      }

      .instructions ::content ul.checklist li {
        padding-left: 24px;
        background-size: 20px;
        background-repeat: no-repeat;
        background-image: url('');
      }

      .instructions ::content table code,
      .instructions ::content h2 code {
        background: white;
      }

      .instructions ::content .indented {
        margin-left: 40px;
      }

      .instructions ::content strong {
        font-weight: 600;
      }

      .instructions ::content paper-button {
        border-radius: 4px;
        color: #FFFFFF;
        font-family: 'Google Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .6px;
        padding-bottom: 6px;
        padding-left: 12px;
        padding-right: 16px;
        padding-top: 6px;
        text-transform: none;
      }

      .instructions ::content paper-button a {
        text-decoration: none;
        color: inherit !important;
      }

      .instructions ::content a paper-button {
        /* The text-decoration styling doesn't apply to inline blocks.
           We use this trick to remove underline when paper-button
           is wrapped in the anchor element. */
        display: inline-block;
      }

      .instructions ::content paper-button.colored {
        background-color: var(--google-material-green-600);
      }


      .instructions ::content paper-button.red {
        background-color: #D93025;
      }

      .instructions ::content iron-icon {
        padding-right: 8px;
        max-height: 16px;
        max-width: 16px;
      }

      .instructions ::content img {
        max-width: 100%;
        width: 100%;
        vertical-align: bottom;
      }

      .instructions ::content table {
        border-spacing: 0;
      }

      .instructions ::content td {
        vertical-align: top;
        border-bottom: 1px solid #CCC;
        padding: 8px;
      }

      .instructions ::content table p {
        margin: 0;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3.faq {
        border-bottom: 1px solid #ddd;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content ul.faq {
        list-style: none;
        padding-left: 1em;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq li {
        font-size: 1.1em;
        margin-bottom: 0.8em;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a {
        color: inherit;
        text-decoration: none;
      }

      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a:hover {
        text-decoration: underline;
      }

      .instructions ::content .faq a[href*="cloud.google.com"] {
        padding-left: 22px;
        background-size: 20px;
        background-repeat: no-repeat;
        background-image: url('');
      }

      .instructions ::content .faq a[href*="stackoverflow.com"] {
        padding-left: 22px;
        background-size: 24px;
        background-repeat: no-repeat;
        background-image: url('');
      }

      .instructions ::content .faq a[href*="support.google.com/webmasters/"] {
        padding-left: 24px;
        background-size: 24px;
        background-repeat: no-repeat;
        background-image: url('');
      }

      .instructions ::content .faq a[href*="developer.android.com"],
      .instructions ::content .faq a[href*="android-developer"] {
        padding-left: 20px;
        background-repeat: no-repeat;
        background-size: 20px;
        background-image: url('');
      }

      .instructions ::content h3 > a[href*="github"],
      .instructions ::content h3 > a[href*="github"]:visited {
        color: black;
        text-decoration: none;
        padding-left: 24px;
        background-repeat: no-repeat;
        background-size: 18px;
        background-image: url('');
      }
    </style>
  </template>
</dom-module>
